<template>
    <div>
        <Button type="primary" @click="modalForm = true" style="margin-right: 15px;">添加数据</Button>
        <Button type="primary" @click="removes" style="margin-right: 15px;">删除多个</Button>

        <Input suffix="ios-search" placeholder="根据货号查询" style="width: auto" v-model="searchBox"/>
        <Button type="primary" @click="onSearch">search</Button>
        <div style="margin-bottom: 15px;"></div>
		<div style="display: inline-block;width:240px;height: 372px; border: 1px rgb(204, 204, 204) solid; float: left;margin-right: 15px; padding: 15px;">
			<Tree :data="data1" @on-select-change='checkTree'></Tree>
		</div>
        
        <Table border :columns="columns" :data="data" @on-selection-change="onSelectionChange" style="display: inline-block;" width="730"></Table>
        <Page :total="total" :page-size="rows" @on-change="onChangePage" :page-size-opts=[5,10,15,20] @on-page-size-change="onPageSizeChange" show-sizer />

        <Modal v-model="modalForm" title="数据操作">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="货号" prop="productID">
                    <Input v-model="formValidate.productID" placeholder="请输入货号"></Input>
                </FormItem>
                <FormItem label="产品名称" prop="productName">
                    <Input v-model="formValidate.productName" placeholder="请输入产品名称"></Input>
                </FormItem>
                <FormItem label="单位成本" prop="unitcost">
                    <Input v-model="formValidate.unitcost" placeholder="请输入单位成本"></Input>
                </FormItem>
                <FormItem label="标价" prop="listprice">
                    <Input v-model="formValidate.listprice" placeholder="请输入标价"></Input>
                </FormItem>
                <FormItem label="是否在售" prop="isSale">
                    <RadioGroup v-model="formValidate.isSale">
                        <Radio label="1">在售</Radio>
                        <Radio label="0">已下架</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="是否新品" prop="isNewProduct">
                    <RadioGroup v-model="formValidate.isNewProduct">
                        <Radio label="1">是</Radio>
                        <Radio label="0">否</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="标签" prop="tag">
                    <CheckboxGroup v-model="formValidate.tag">
                        <Checkbox label="食品"></Checkbox>
                        <Checkbox label="家具"></Checkbox>
                        <Checkbox label="电器"></Checkbox>
                        <Checkbox label="日用品"></Checkbox>
                        <Checkbox label="服饰"></Checkbox>
                    </CheckboxGroup>
                </FormItem>
                <FormItem label="产品描述" prop="description">
                    <Input v-model="formValidate.description" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请在此输入产品描述..."></Input>
                </FormItem>
                <FormItem label="库存" prop="status">
                    <Input v-model="formValidate.status" placeholder=""></Input>
                </FormItem>
                <FormItem label="销量" prop="saleNum">
                    <Input v-model="formValidate.saleNum" placeholder="请输入销量"></Input>
                </FormItem>
                <FormItem label="评论数量" prop="commentNum">
                    <Input v-model="formValidate.commentNum" placeholder="请输入评论数量"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
                    <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
                </FormItem>
            </Form>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                searchBox   : '',
                myUrl       : this.GLO.myUrl,
                formValidate: {
                    productID   : '',
                    productName : '',
                    unitcost    : '',
                    listprice   : '',
                    isSale      : '',
                    isNewProduct: '',
                    tag         : [],
                    description : '',
                    status      : 0,
                    saleNum     : 0,
                    commentNum  : 0
                },
                data1: [],
                ruleValidate: {
                    productID: [
                        { required: true, message: '必须输入货号' }
                    ],
                    productName: [
                        { required: true, message: '必须输入产品名称' }
                    ],
                    unitcost: [
                        { required: true, message: '必须输入单位成本' }
                    ],
                    listprice: [
                        { required: true, message: '必须输入标价' }
                    ],
                    isSale: [
                        { required: true, message: '请选择是否上架' }
                    ],
                    isNewProduct: [
                        { required: false }
                    ],
                    tag: [
                        { required: true, type: 'array', min: 1, message: '至少选择一个标签' },
                        { type: 'array', max: 2, message: '最多选择两个标签' }
                    ],
                    description: [
                        { required: true, message: '请输入产品描述' },
                        { type: 'string', min: 20, message: '描述最低不少于20字' }
                    ],
                    status: [
                        { required: false }
                    ],
                    saleNum: [
                        { required: false }
                    ],
                    commentNum: [
                        { required: false }
                    ]
                },
                columns: [
                    {
                        type : 'selection',
                        width: 60,
                        align: 'center',
                        fixed:'left'
                    },
                    {
                        title: '货号',
                        key  : 'productID',
                        fixed:'left',
                        width:100
                    },
                    {
                        title: '产品名称',
                        key  : 'productName',
                        width:100
                    },
                    {
                        title: '单位成本',
                        key  : 'unitcost',
                        width:100
                    },
                    {
                        title: '标价',
                        key  : 'listprice',
                        width:100
                    },
                    {
                        title: '是否上架',
                        key  : 'isSale',
                        width:100
                    },
                    {
                        title: '是否新品',
                        key  : 'isNewProduct',
                        width:100
                    },
                    {
                        title: '标签',
                        key  : 'tag',
                        width:100
                    },
                    {
                        title: '产品描述',
                        key  : 'description',
                        width:200,
                        ellipsis:true
                    },
                    {
                        title: '库存',
                        key  : 'status',
                        width:100
                    },
                    {
                        title: '总销售量',
                        key  : 'saleNum',
                        width:100
                    },
                    {
                        title: '评论数量',
                        key  : 'commentNum',
                        width:100
                    },
                    {
                        title : '操作',
                        key   : 'action',
                        width : 150,
                        align : 'center',
                        fixed:'right',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row._id)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row._id)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data     : [],
                total    : 0,
                page     : 1,
                rows     : 5,
                modalForm: false,
                ids      : []
            }
        },
        methods: {
            edit (id) {
                // 请求数据，打开对话框，显示表单的数据，进行提交
                this.axios({
                    url   : this.myUrl + `product/data/${id}`,
                    method: 'get'
                }).then(res => {
                    this.formValidate = res.data;
                    this.modalForm    = true;
                })
            },
            remove (id) {
                this.$Modal.confirm({
                    title  : '确认操作',
                    content: '<p>你确认删除该记录吗？</p>',
                    onOk   : () => {
                        this.axios({
                            url   : this.myUrl + `product/data/${id}`,
                            method: 'delete',
                        }).then(res => {
                            this.getData();
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('Clicked cancel');
                    }
                });
            },
            getData() {
                this.axios({
                    url   : this.myUrl + 'product/list',
                    method: 'post',
                    data  : {
                        page: this.page,
                        rows: this.rows
                    }
                }).then(res => {
                    this.total = res.data.total;
                    this.data  = res.data.rows;
                })
            },
            onChangePage(page) {
                this.page = page;
                this.getData();
            },
            onPageSizeChange(rows) {
                this.rows = rows;
                this.getData();
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if(this.formValidate._id){
                            this.axios({
                                url   : this.myUrl + `product/data/${this.formValidate._id}`,
                                method: 'put',
                                data  : this.formValidate
                            }).then( res => {
                                this.modalForm = false;
                                this.getData();
                                // 数据重置
                                this.$data.formValidate = this.$options.data().formValidate;
                            })
                        }else {
                            this.axios({
                                url   : this.myUrl + `product/data`,
                                method: 'post',
                                data  : this.formValidate
                            }).then( res => {
                                this.modalForm = false;
                                this.getData();
                                
                            })
                        }
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset(name) {
                this.$refs[name].resetFields();
            },
            onSelectionChange(selections) {
                var ids = [];
                for(let i = 0; i < selections.length; i++) {
                    ids.push(selections[i]._id);
                }
                this.ids = ids.toString();
            },
            removes() {
                this.$Modal.confirm({
                    title  : '确认操作',
                    content: '<p>确认删除该数据？</p>',
                    onOk   : () => {
                        this.axios({
                            url   : this.myUrl + `product/data/removes`,
                            method: 'post',
                            data  : {
                                ids: this.ids
                            }
                        }).then(res => {
                            this.getData();
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('Clicked cancel');
                    }
                })
            },
            onSearch() {
                this.axios({
                    url   : this.myUrl + 'product/list',
                    method: 'post',
                    data  : {
                        name: this.searchBox,
                        page: this.page,
                        rows: this.rows
                    }
                }).then(res => {
                    this.total = res.data.total;
                    this.data  = res.data.rows;
                });
            },
            getTree(){
            	this.axios({
                    url   : this.myUrl + 'cate/list/1',
                    method: 'post'
                    
                }).then(res => {
                    this.data1=res.data;
                });
            },
            checkTree(node){
            	if(node[0]){
		   		 this.treetitle=node[0].title;//自己
				    var arr=[];
				    function getText(obj){
					    arr.push(obj.title);
					    if(obj.children){
				        for(let i=0;i<obj.children.length;i++){
					        getText(obj.children[i]);
					      }
					    }
				    }
				    getText(node[0]);
				    console.log(arr);
                    this.axios({
                    url:'http://localhost:3000/product/list',
                   	method:'post',
                    data:{
                        tag:arr.toString()
                    }
                    }).then(res=>{
                    	this.data=res.data.rows;
                    })
		   		}
            }
        },
        mounted(){
            this.getData();
            this.getTree();
        }
    }
</script>
